<template>
  <div>
    <div v-if="bigArray.length > 0" class="big">
      <mx-link
        v-for="(item, index) in bigArray"
        :key="index"
        class="big-item"
        :class="{ 'mr-8': index === 0 }"
        :to="`${NEWS_PAGE_PATH_MAP[item.newsType || item.news_type]}/${
          item.newsId || item.news_id
        }`"
      >
        <t-image
          class="big-cover img-cover"
          :src="(item.thumbs && item.thumbs[0]) || ''"
        />
        <div class="item-content">
          <div>
            <span class="tag">{{ $t(NEWS_TYPE_LABEL[item.newsType]) }}</span>
          </div>
          <p class="title ov-2">{{ item.title }}</p>
        </div>
      </mx-link>
    </div>
    <!-- <div v-if="smallArray.length > 0" class="small mt-8">
      <mx-link
        v-for="(item, index) in smallArray"
        :key="index"
        class="small-item"
        :class="{ 'mr-8': index < 2 }"
        :to="`${NEWS_PAGE_PATH_MAP[item.newsType || item.news_type]}/${
          item.newsId || item.news_id
        }`"
      >
        <t-image
          class="small-cover img-cover"
          :src="(item.thumbs && item.thumbs[0]) || ''"
        />
        <div class="item-content">
          <div>
            <span class="tag">{{ $t(NEWS_TYPE_LABEL[item.newsType]) }}</span>
          </div>
          <p class="title ov-2">{{ item.title }}</p>
        </div>
      </mx-link>
      <swiper
        v-if="bannerArray && bannerArray.length > 0"
        :navigation="bannerArray.length > 1"
        :space-between="30"
        :allow-touch-move="true"
        :speed="500"
        class="banner_swiper"
      >
        <swiper-item
          v-for="(item, index) in bannerArray"
          :key="index"
          class="small-item"
        >
          <mx-link
            :to="`${NEWS_PAGE_PATH_MAP[item.newsType || item.news_type]}/${
              item.newsId || item.news_id
            }`"
          >
            <img
              class="small-cover img-cover"
              :src="(item.thumbs && item.thumbs[0]) || ''"
            />
            <div class="item-content">
              <div>
                <span class="tag">{{
                  $t(NEWS_TYPE_LABEL[item.newsType])
                }}</span>
              </div>
              <p class="title ov-2">{{ item.title }}</p>
            </div>
          </mx-link>
        </swiper-item>
      </swiper>
    </div> -->
    <div
      v-if="smallArray.length > 0 || bannerArray.length > 0"
      class="small mt-8"
    >
      <!-- 第一块 -->
      <mx-link
        class="small-item"
        :to="`${
          NEWS_PAGE_PATH_MAP[smallItem.newsType || smallItem.news_type]
        }/${smallItem.newsId || smallItem.news_id}`"
      >
        <t-image
          class="small-cover img-cover"
          :src="(smallItem.thumbs && smallItem.thumbs[0]) || ''"
        />
        <div class="item-content">
          <div>
            <span class="tag">{{
              $t(NEWS_TYPE_LABEL[smallItem.newsType])
            }}</span>
          </div>
          <p class="title ov-2">{{ smallItem.title }}</p>
        </div>
      </mx-link>
      <!-- 第二块 -->
      <swiper
        v-if="bannerArray && bannerArray.length > 0"
        :navigation="bannerArray.length > 1"
        :space-between="30"
        :allow-touch-move="true"
        :speed="500"
        class="banner_swiper small-item"
      >
        <swiper-item v-for="(item, index) in bannerArray" :key="index">
          <mx-link
            :to="`${NEWS_PAGE_PATH_MAP[item.newsType || item.news_type]}/${
              item.newsId || item.news_id
            }`"
          >
            <img
              class="small-cover img-cover"
              :src="(item.thumbs && item.thumbs[0]) || ''"
            />
            <div class="item-content">
              <div>
                <span class="tag">{{
                  $t(NEWS_TYPE_LABEL[item.newsType])
                }}</span>
              </div>
              <p class="title ov-2">{{ item.title }}</p>
            </div>
          </mx-link>
        </swiper-item>
      </swiper>
      <!-- 第三块 -->
      <div class="small-item">
        <div
          class="ad-box"
          style="
            width: 100%;
            height: 100%;
            line-height: 100%;
            margin: 0 auto;
            text-align: center;
          "
        >
          <iframe
            frameborder="0"
            scrolling="no"
            style="
              width: 305px;
              height: 270px;
              overflow: hidden;
              margin-left: 0px;
              text-align: center;
              z-index: 9999;
            "
            class="ad-iframe"
            src="https://tnaot.com/adpcmr12.html"
          ></iframe>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  NEWS_TYPE,
  NEWS_TYPE_LABEL,
  NEWS_PAGE_PATH_MAP
} from '@/constants/index.js';
import MxLink from '@/components/MxLink.vue';

export default {
  components: { MxLink },

  props: {
    list: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      NEWS_TYPE,
      NEWS_TYPE_LABEL,
      NEWS_PAGE_PATH_MAP
    };
  },

  computed: {
    bigArray() {
      return this.list.slice(0, 2);
    },
    smallArray() {
      return this.list.length > 5 ? this.list.slice(2, 4) : this.list.slice(2);
    },
    // 新增：第一块区域的单个数据
    smallItem() {
      return this.smallArray[0] || {};
    },
    bannerArray() {
      const list = this.list.length > 5 ? this.list.slice(4) : [];
      return list.length === 2 ? [...list, ...list] : list;
    },
    // 新增：第二块区域的单个数据
    bannerItem() {
      return this.bannerArray[0] || null;
    }
  }
};
</script>

<style lang="scss" scoped>
.big {
  display: flex;

  .big-item {
    width: 520px;
    height: 292px;
    border: 0.5px solid rgba(42, 60, 88, 0.1);
    border-radius: 8px;
    position: relative;

    .big-cover {
      position: absolute;
      left: 0;
      top: 0;
      width: 520px;
      height: 292px;
      border: 0.5px solid rgba(42, 60, 88, 0.1);
      border-radius: 8px;
      z-index: 1;
    }
  }
}

.small {
  display: flex;
  width: 100%; //占满父容器
  gap: 1%; //三个模块间距

  .small-item {
    /* width: 344px;
    height: 194px;
    border: 0.5px solid rgba(42, 60, 88, 0.1);
    border-radius: 8px;
    position: relative; */
    width: 32.67%;
    height: 194px;
    border: 0.5px solid rgba(42, 60, 88, 0.1);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
  }
  //空白占位
  /* .empty-placeholder {
    background-color: #f5f7fa;
    border: 0.5px solid rgba(42, 60, 88, 0.1);
  } */
}

.small-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 344px;
  height: 194px;
  border: 0.5px solid rgba(42, 60, 88, 0.1);
  border-radius: 8px;
  z-index: 1;
}

.big-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 520px;
  height: 292px;
  border: 0.5px solid rgba(42, 60, 88, 0.1);
  border-radius: 8px;
  z-index: 1;
}

.item-content {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  border-radius: 0 0 8px 8px;
}

.tag {
  display: inline-block;
  background: #fa4646;
  border-radius: 8px;
  font-size: 12px;
  color: #ffffff;
  padding: 0 8px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  margin-left: 12px;
}

.title {
  margin: 4px 12px 12px 12px;
  font-size: 20px;
  color: #ffffff;
  letter-spacing: 0;
  line-height: 32px;
  font-weight: 500;
}

.banner_swiper {
  width: 344px;
  height: 194px;
  border: 0.5px solid rgba(42, 60, 88, 0.1);
  border-radius: 8px;
  overflow: hidden;

  .banner-img {
    width: 344px;
    height: 194px;
  }
}
</style>
